<template>
  <div class="result-detail">
      <div class="pic">
        <img :src="info.voteCoverUrl?info.voteCoverUrl:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2851070236,2216724533&fm=27&gp=0.jpg'" alt="">
      </div>
      <div class="title">{{info.voteTitle}}</div>
      <div class="data-item box box-pack-between">
        <div class="data">发起人：{{info.creator}}</div>
        <div class="data">主题ID：{{info.voteId}}</div>
      </div>
      <div class="result-wrap">
        <div class="state">已结束</div>
        <div class="result-option" v-for="(item,index) in info.voteOptionList" :key="index">
          <div class="option-title">{{item.optionIntroduction}}</div>
          <div class="option-info box box-pack-between">
            <div class="votes">{{item.turnout}}票</div>
            <div class="num">{{item.proportion}}%</div>
          </div>
           <vue-progress-bar :value="item.proportion" type="rect" :options="{rectRadius:10,pathColors:['#D4D4D4',arr[index]],duration:800,rectWidth:300,rectHeight:15}"></vue-progress-bar>
          <div class="tip over-hidden">选项地址：{{item.optionAddress}}</div>
        </div>
      </div>
      <div class="result-total">
        <div class="total-list">总计：{{info.obtained }}票</div>
        <div class="total-list">发行投票币：{{info.turnout }}枚</div>
        <div class="total-list">累计收到投票币：{{info.obtained }}枚</div>
        <div @click="linkTo" class="btn">{{type == 'myVote'?'查看我的投票明细':'查看该主题投票记录'}}</div>
      </div>
  </div>
</template>

<script>
  import vueProgressBar from 'svg-progress-bar'
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    components: {
        vueProgressBar
    },
    data () {
      return {
        detail: {
          url: "https://img-test.wemeshops.com/3dbd10d0-2ef3-4e7a-ba97-dfcdaf2799f3.png",
        },
        arr:['#FF2020','#FF6623','#FFD33C','#EEFA2E','#FF2020','#FF6623','#FFD33C','#EEFA2E'],
        id:'',
        type:'',
        info:''
      }
    },
    mounted(){
      console.log(this.$router.meta)
      this.id = this.$router.currentRoute.query.id;
      this.type = this.$router.currentRoute.query.type;
      this.getActivity()
    },
    methods:{
      getActivity(){
        let  url = CONSTANT.URL.VOTE.VOTEDETAIL,
            param = {voteId:this.id}
        common.requestAjax(url,{},param,(res)=>{
            if(res.status == 200){
                this.info = res.data.bussData;
            }else{

            }
        })
      },
      linkTo(){
        if(this.type == 'myVote'){
          this.$router.push({ path: 'myVoteDetail', query: { id: this.info.tradingHash }})
        }else{
          this.$router.push({ path: 'myVoteRecordList', query: { id: this.info.voteId}})
        }
        
      },
    },
  }
</script>

<style lang="scss">
    .result-detail {
      height: 100%;
      background-color: #fff;
      min-height: 100%;
      font-size: .32rem;
      .title{
        text-align: center;
        height: .31rem;
        line-height: .31rem;
        margin: .1rem 0 .3rem;
      }
      .pic{
        img{
          width: 100%;
          height: 3.26rem;
        }
      }
      .data-item{
        padding: 0 .31rem;
        font-size: .32rem;
        color: #333;
        border-bottom: 1px solid #DEDEDE;
        padding-bottom: .24rem;
      }
      .result-wrap{
        padding-top: .2rem;
        padding: .2rem .32rem .52rem;
        border-bottom: 1px solid #DEDEDE;
        .state{
          color: #999;
          text-align: right;
          margin-bottom: .3rem;
        }
        .result-option{
          width: 5.96rem;
          margin: 0 auto .9rem;
          &:last-child{
            margin-bottom: 0;
          }
          .option-title{
            height: .3rem;
            text-align: center;
            line-height: .3rem;
            margin-bottom: .25rem;
          }
          .option-info{
            font-size: .28rem;
            color: #666;
            .votes{
              color: #DF2121;
            }
          }
          .tip{
            font-size: .28rem;
            color: #333;
          }
        }
      }
      .result-total{
        padding-left: .76rem;
        color: #333;
        padding-top: .2rem;
        padding-bottom: .5rem;
        .total-list{
          margin-bottom: .32rem;
          height: .3rem;
          line-height: .3rem;
        }

      }
      .btn{
        width: 3.22rem;
        height: .78rem;
        background-color: #198AE7;
        text-align: center;
        line-height: .78rem;
        color: #fff;
        font-size: .3rem;
        border-radius: .1rem;
        -webkit-border-radius: .1rem;
        margin: .4rem 0 .4rem 1.38rem;
      }
    }
    .circles-text{
        display: none;
    }
</style>
